<template>
  <div>
    <van-grid :column-num="4">
      <van-grid-item v-for="(item,index) of munulist" :key="index" class="gridmenu">
        <router-link class="activeclass"  :to="item.link">
          <img class="menuimg" :src="item.imgsrc" />
          <p class="menutitle" >{{item.text}}</p>
        </router-link>
      </van-grid-item>
    </van-grid>

    <div class="viewview">
      <div style="display:flex">

      </div>
      <div></div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
    }
  },
  props: {
    munulist: {
      type: Array
    }
  }
};
</script>


<style long="sass" scoped>
.menuimg{
  width:3rem;
  height:3rem;
  margin: 0 0 0.5rem 0;
  border-radius: 50%;
   box-shadow: 0px 0px 15px #afafaf;
}

.menutitle{
  text-align:center;
  color: #686868;
}

.activeclass{
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}

.gridmenu{
  /* margin: 0.5rem; */
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-left: 0;
  /* box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); */
}

.gridmenu:nth-child(4n+1){
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.gridmenu:nth-child(n+5){
  border-top: 0;
}

.viewview{

}
</style>
